<template>
  <div class="wrap">
    <div id="main"></div>
    <div id="piemain"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    data(){
        return{
            barData:[]
        }
    },
    methods: {
        getBar() {
        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            backgroundColor:'#000',
            tooltip: {
            trigger: "axis",
            legend: {
                data: ["销量"],
            },
            axisPointer: {
                type: "shadow",
            },
            },
            grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
            },
            xAxis: [
            {
                type: "category",
                data: [
                "未知",
                "17岁以下",
                "18-24岁",
                "25-29岁",
                "30-39岁",
                "40-49岁",
                "50岁以下",
                ],
                axisTick: {
                alignWithLabel: true,
                },
            },
            ],
            yAxis: [
            {
                type: "value",
            },
            ],
            series: [
            {
            label: {
                show: true,
                // offset:[0,-50]
                position: "top",
                },
            name: "销量",
            type: "bar",
            barWidth: "60%",
            data: [654, 654, 4400, 5300, 6200, 3300, 1500],
            },
            ],
        };

        option && myChart.setOption(option);
    },
    getPie() {
        var chartDom = document.getElementById("piemain");
        var myChart = echarts.init(chartDom);
        var option;

    option = {
        title: {
            text: "城市占比图",
            left: "center",
        },
        tooltip: {
            trigger: "item",
        },
        legend: {
            orient: "horizontal",
            left: "center",
            top:"bottom"
        },
        series: [
        {
            name: "资源占比",
            type: "pie",
            radius: "50%",
            data: [
                { value: 1048, name: "一线城市" },
                { value: 735, name: "二线城市" },
                { value: 580, name: "三线城市" },
                { value: 484, name: "四线级以下" },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 50,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                },
                },
            },
        ],
        };

        option && myChart.setOption(option);
    },
},
mounted() {
    this.getBar();
    this.getPie();
    },
};
</script>
<style scoped>
.wrap {
    width: 100%;
    height: 100%;
    display: flex;
    }

#main {
    width: 50%;
    height: 100%;
}

#piemain {
    width: 50%;
    height: 100%;
}
</style>